import * as React from 'react';
import { Form, Slider, Switch, Button, Modal, Select, Transfer, TreeSelect } from 'antd';
import MForm, { createMForm, FormItemLayout } from '../../../component/form/MForm';

import CustomerDetailsStep7 from './CustomerDetailsStep7';

class CustomerDetailStep extends MForm {

  constructor(props: any) {
    super(props);
    this.state = Object.assign({
      mockData: [],
      targetKeys: [],
      modal1: {
        visible: false,
        confirmLoading: false,
        fields: {
          name: 'jack',
          age: 29
        }
      },
      modal2: {
        visible: false,
        confirmLoading: false,
        fields: {
          name: 'jack',
          age: 30
        }
      },
      modal3: {
        visible: false,
        confirmLoading: false,
        fields: {
          name: 'jack',
          age: 31
        }
      },
    }, this.props.data, this.state);
  }

  // 组件将要加载
  componentWillMount() {
    this.fetchLoad();
    this.initTransfer();
    this.initTreeSelect();
  }

  handleSubmit = () => {
    this.props.onSubmit();
  }

  handleOk = (key) => {
    let form = this.refs[key] as MForm;
    form.validateFields((errors, fields) => {
      if (!errors) {
        this.onModalSubmit(key, fields);
        let modal = this.state[key];
        modal.confirmLoading = true;
        this.setState({
          [key]: modal
        });
        setTimeout(() => {
          modal.confirmLoading = false;
          modal.visible = false;
          this.setState({
            [key]: modal
          });
        }, 2000);
      }
    });
  }

  handleCancel = (key) => {
    let modal = this.state[key];
    modal.visible = false;
    this.setState({
      [key]: modal
    });
  }
  showModal = (key) => {
    let modal = this.state[key];
    modal.visible = true;
    this.setState({
      [key]: modal
    });
  }
  // submit
  onModalSubmit = (key, fields) => {
    let modal = this.state[key];
    modal.fields = fields;
    this.setState({
      [key]: modal
    });
  }

  alertModal = () => {
    Modal.confirm({
      title: 'This is a confirm message',
      content: 'some messages...some messages...',
    });
  }

  renderUI() {
    const { getFieldDecorator } = this.props.form;
    const style = {
      display: this.props.show === false ? 'none' : 'block'
    }
    return (
      <div style={style} className='view-form'>
        <Form inline ref='form' onSubmit={this.handleSubmit}>
          <Button type='primary' onClick={() => this.showModal('modal1')}>打开弹窗1</Button>
          <Button type='primary' onClick={() => this.showModal('modal2')}>打开弹窗2</Button>
          <Button type='primary' onClick={() => this.alertModal()}>打开弹窗3</Button>
          <section className='view-section'>
            <Form.Item
              {...FormItemLayout}
              label='Slider'
              className='ant-form-item-row ant-form-item-auto'
            >
              {getFieldDecorator('slider', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!' },
                ],
              })(
                <Slider marks={{ 0: '普通会员', 33: '白金会员', 66: '黄金会员', 100: '钻石会员' }} />
                )}
            </Form.Item>

            <Form.Item
              {...FormItemLayout}
              label='Switch'
            >
              {getFieldDecorator('switch', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!' },
                ],
              })(
                <Switch />
                )}
            </Form.Item>
            <Form.Item
              {...FormItemLayout}
              label='SelectTag'
            >
              {getFieldDecorator('SelectTag', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!' },
                ],
              })(
                <Select tags ></Select>
                )}
            </Form.Item>
            <Form.Item
              label='Transfer'
              className='ant-form-item-row'
            >
              {getFieldDecorator('Transfer', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!' },
                ],
              })(
                <Transfer
                  dataSource={this.state.mockData}
                  targetKeys={this.state.targetKeys}
                  onChange={this.handleChange}
                  render={this.renderItem}
                  filterOption={this.filterOption}
                />
                )}
            </Form.Item>
            <Form.Item
              label='TreeSelect'
              className='ant-form-item-row'
            >
              {getFieldDecorator('TreeSelect', {
                rules: [
                  { required: false, message: 'Please select your favourite colors!' },
                ],
              })(
                <TreeSelect
                  style={{ width: 300 }}
                  dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                  treeData={this.state.treeData}
                  placeholder='Please select'
                  treeDefaultExpandAll
                />
                )}
            </Form.Item>
          </section>
        </Form>

        <Modal title='弹窗1'
          visible={this.state.modal1.visible}
          onOk={() => this.handleOk('modal1')}
          confirmLoading={this.state.modal1.confirmLoading}
          onCancel={() => this.handleCancel('modal1')}
        >
          {this.state.modal1.visible ? <CustomerDetailsStep7 ref='modal1' {...this.state.modal1.fields} onSubmit={(fields) => this.handleOk('modal1')} /> : null}
        </Modal>
        <Modal title='弹窗2'
          visible={this.state.modal2.visible}
          onOk={() => this.handleOk('modal2')}
          confirmLoading={this.state.modal1.confirmLoading}
          onCancel={() => this.handleCancel('modal2')}
        >
          {this.state.modal2.visible ? <CustomerDetailsStep7 ref='modal2' {...this.state.modal2.fields} onSubmit={(fields) => this.handleOk('modal2')} /> : null}
        </Modal>
      </div>
    );
  }

  initTransfer() {
    const targetKeys = [];
    const mockData = [];
    for (let i = 0; i < 20; i++) {
      const data = {
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`,
        chosen: Math.random() * 2 > 1,
      };
      if (data.chosen) {
        targetKeys.push(data.key);
      }
      mockData.push(data);
    }
    this.setState({ mockData, targetKeys });
  }
  handleChange(targetKeys, direction, moveKeys) {
    console.log(targetKeys, direction, moveKeys);
    this.setState({ targetKeys });
  }
  filterOption() {
    return true;
  }
  renderItem(item) {
    const customLabel = (
      <span className='custom-item'>
        {item.title}- {item.description}
      </span>
    );

    return {
      label: customLabel,  // for displayed item
      value: item.title,   // for title and filter matching
    };
  }

  initTreeSelect() {
    const treeData = [{
      label: 'Node1',
      value: '0-0',
      key: '0-0',
      children: [{
        label: 'Child Node1',
        value: '0-0-1',
        key: '0-0-1',
      }, {
        label: 'Child Node2',
        value: '0-0-2',
        key: '0-0-2',
      }],
    }, {
      label: 'Node2',
      value: '0-1',
      key: '0-1',
    }];
    this.setState({
      treeData
    });
  }

}
export default createMForm(CustomerDetailStep);

